<template>
  <div class="leader-list">
    <div class="search card">
      <el-form :inline="true" :model="search" size="mini">
        <el-form-item :label="$t('settings.name')">
          <el-input
            v-model="search.displayName"
            :placeholder="$t('settings.inputName')"
            :maxlength="50"
            clearable
            @blur="trim('displayName')"
            @mouseout.native="blurRule($event)"
          />
        </el-form-item>
        <el-form-item :label="$t('settings.tel')">
          <el-input
            v-model="search.phone"
            :placeholder="$t('settings.inputPhone')"
            :maxlength="11"
            onkeyup="value=value.replace(/[^\d]/g,'')"
            clearable
            @blur="trim('phone')"
            @mouseout.native="blurRule($event)"
          />
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-search" @click="getList">{{
            $t('common.search')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="result.data" size="mini">
        <el-table-column
          type="index"
          :label="$t('common.num')"
          align="center"
        />
        <el-table-column
          property="id"
          label="userID"
          align="center"
          width="180px"
        />
        <el-table-column
          property="displayName"
          :label="$t('settings.name')"
          align="center"
        />
        <el-table-column
          property="getUserSex"
          :label="$t('ddio.sex')"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              {{ getUserSex(scope.row.sex) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          property="phoneNums"
          :label="$t('settings.tel')"
          align="center"
        />
        <el-table-column
          :label="$t('common.operate')"
          align="center"
          width="130px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="chooseLeader(scope.row)"
            >{{ $t('common.select') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <div class="pagination">
        <pagination
          v-show="result.totalCount > 0"
          :total="result.totalCount"
          :page.sync="search.page"
          :limit.sync="search.size"
          @pagination="pagination"
        />
      </div>
    </div>
    <br>
    <br>
  </div>
</template>

<script>
import doodApi from '@/api/ddio';
import { mapGetters } from 'vuex';
import Pagination from '@/components/Pagination';
import { trim } from '@/utils/';

export default {
  name: 'EmployeeChooseSingle',
  components: { Pagination },
  data() {
    return {
      search: {
        displayName: null,
        phone: null,
        page: 1,
        size: 10,
        roles: 'ROLE_USER',
      },
      result: {
        code: 0,
        msg: '',
        data: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
      },
    };
  },
  computed: { ...mapGetters(['isSuperman', 'doodId']) },
  mounted() {
    this.getList();
  },
  methods: {
    /**
     * 获取列表数据
     */
    async getList() {
      const res = await doodApi.getExcludeRolesDoodUser(this.search);
      this.result = res;
      this.result.totalCount = Number(res.headers['x-total-count']);
      this.getListByPageOne();
    },
    /**
     * 防止分页传参错误问题导致暂无数据
     */
    getListByPageOne() {
      if (
        this.search.page !== 1 &&
        this.result.totalCount / this.search.size <= this.search.page - 1
      ) {
        this.search.page = 1;
        this.getList();
      }
    },
    /**
     * 选择直属领导
     * @param {JSON} row 直属领导相关数据信息
     */
    chooseLeader(row) {
      this.$emit('chooseLeader', row);
    },
    /**
     * 模版分页
     */
    pagination() {
      this.getList();
    },
    handleSizeChange(val) {
      this.search.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.search.page = val;
      this.getList();
    },
    /**
     * 性别转化
     **/
    getUserSex(sex) {
      switch (sex) {
        case 0:
          return this.$t('common.unknown');
        case 1:
          return this.$t('common.male');
        case 2:
          return this.$t('common.female');
      }
    },
    /**
     * 去除两端空格处理
     * @param {String} name 输入框名称
     */
    trim(name) {
      this.search[name] = trim(this.search[name]);
    },
    /**
     * 失去焦点
     * @param {DOMEvent} event 当前输入框
     */
    blurRule(event) {
      // 输入框失去焦点操作
      event.target.blur();
    },
  },
};
</script>

<style scoped>
.pagination {
  margin: -60px 0;
}
</style>
